<template>
    <div class="subject">
      <span>{{ firstNum }}</span>
      <span>+</span>
      <span>{{ lastNum }}</span>
      <span>=</span>
      <input type="number" v-model="newNum"/>
      <button @click="submit(index)">提交</button>
    </div>
  </template>
  
  <script>
  export default {
    props:{
        index:Number,
        num:Array
    },
    data(){
        return{
            newNum:null,
            firstNum:Math.floor(Math.random()*11),
            lastNum:Math.floor(Math.random()*11),
        }
    },
    methods:{
        submit(index){
            // console.log(index);
            let arr=[]
            for(let i of this.num){
                // console.log(i.id);
                arr.push(i.id)
            }
            // console.log(arr);
            // console.log(arr.find(item=>item==index+1));
        //    arr.find(item=>item==index+1)
            console.log(this.num[arr.find(item=>item==index+1)-1]);
            let resNum=this.firstNum+this.lastNum
            if(this.newNum==resNum){
                this.$emit('change','正确')
            }else if(this.newNum!=resNum){
                this.$emit('change','不正确')
            }else if(this.newNum==''){
                this.$emit('change','未回答')
            }
        },
    }
  };
  </script>
  
  <style scoped>
  .subject {
    margin: 5px;
    padding: 5px;
    font-size: 20px;
  }
  .subject span {
    display: inline-block;
    text-align: center;
    width: 20px;
  }
  .subject input {
    width: 50px;
    height: 20px;
  }
  </style>